<template>
<div class="bigboxx">
  <div class="hot" v-if="imgs">
    <img :src="imgs.coverImgUrl" class="big" />
    <div class="back">
      <img src="../assets/backicon.svg"  @click="gotoMenu"/><span>歌单</span>
    </div>
    <div class="all">
      <div class="little">
        <span class="lsthd_icon">歌单</span><img :src="imgs.coverImgUrl" />
      </div>
      <div class="plhead_fr">
        <h2 class="aaa">{{ imgs.name }}</h2>
        <i class="bbb"
          ><img :src="imgs.creator.avatarUrl" />
          <span class="ccc">{{ imgs.description }}</span></i
        >
      </div>
    </div>
    <div class="list">歌曲列表 共{{newSongs.length}}首</div>
  </div>
  </div>
</template>

<script>
export default {
  props: ["imgs","newSongs"],
  methods: {
    gotoMenu(){
      //跳转到上一次浏览的页面  this.$router.go(-1)
      this.$router.go(-1)
      //  this.$router.replace('/')
    },
  }
};
</script>

<style scoped lang="less">
.bigboxx{
   width: 100%;
  height: 200px;
.hot {
  width: 100%;
  height: 200px;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  .big {
    width: 100%;
    height: 177px;
    filter: blur(2px) brightness(0.5);
  }
  .back {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 3px;
    left: 10px;
    span {
      display: inline-block;
      width: 60px;
      font-size: 16px;
      color: #ffffff;
      position: absolute;
      top: 3px;
      left: 40px;
    }
  }
  .all {
    width: 295px;
    height: 120px;
    position: absolute;
    top: 30px;
    left: 20px;
    .little {
      width: 120px;
      height: 120px;
      position: absolute;
      left: 0;
      top: 0;
      .lsthd_icon {
        position: absolute;
        z-index: 3;
        top: 10px;
        left: 0;
        padding: 0 8px;
        height: 17px;
        color: #fff;
        font-size: 9px;
        text-align: center;
        line-height: 17px;
        background-color: rgba(217, 48, 48, 0.8);
        border-top-right-radius: 17px;
        border-bottom-right-radius: 17px;
      }
    }
    .plhead_fr {
      width: 165px;
      height: 120px;
      margin: 0 0 0 16px;
      position: absolute;
      top: 0;
      left: 120px;
      .aaa {
        width: 100%;
        height: 45px;
        font-size: 17px;
        color: #ffffff;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .bbb {
        width: 150px;
        height: 30px;
        position: absolute;
        top: 70px;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
        }
        .ccc {
          display: inline-block;
          float: right;
          width: 120px;
          // height: 30px;
          text-overflow: -o-ellipsis-lastline;
          color: #ffffff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
  .list {
    width: 100%;
    height: 23px;
    color: #666666;
    background: #ebecec;
    margin-top: -5px;
    font-size: 12px;
    line-height: 23px;
    padding-left: 20px;
  }
}
}
</style>